<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>商品详情-九果十代</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no">
    <link rel="stylesheet" href="${ctx}/mobielresouce/styles/app.css"/>
    <style>
        .ui-slider{height: 450px;padding: 0;overflow: hidden;}
        .ui-slider li img{width: 100%;}

        .ui-tab-content img{width: 100%;}

        .t{bottom: 0;background: rgba(255,255,255, .9);left: 0;right: 0;padding: 10px;z-index: 11;}
        .t .ui-mask{position: absolute;top: 100%;left: 0;right: 0;background: rgba(255,255,255, .9);border-bottom: 1px solid #ccc;}
        .t .ui-mask .ui-list{background: transparent;}
        .t .ui-mask .ui-list > li{padding: 10px 0;}
        .t .ui-mask .ui-list a{position: relative;margin: 0;}
        .u-list-tit{width: 70px;}
        .num{width: 60px;height: 25px;text-align: center;font-size: 14px;color: #333;margin-left: -28px;}
    </style>
</head>
<body>
<header class="ui-menu ui-tooltips-guide">
    <div class="ui-menu-cnt ui-border-b">
        <a class="ui-btn ui-fl">返回</a>
        <span class="ui-title">商品详情</span>
        <a class="ui-btn ui-fr">首页</a>
    </div>
</header>
<section class="ui-slider">
    <ul class="ui-slider-content" style="width: 300%">
        <li><img src="${goods.goods_image!}" alt=""/></li>
         <%for(goodsSku in goodsSkus){%>
           <li id="${goodsSku.id!}"><img src="${goodsSku.goods_image!}" alt=""/></li>
         <%}%>
    </ul>
</section>
<section class="ui-constom-block" style="margin: 0;border-top: none;">
    <h3>${goods.goods_name!}</h3>
    <p>${goods.goods_brief!}</p>
    <p class="price">${goods.base_price!}</p>
</section>

<section>
    <div class="ui-tab ui-pr">
        <ul class="ui-tab-nav ui-border-b ui-pa">
            <li class="current">产品详情</li><!--
            <li>产品参数</li>
        --></ul>
        <ul class="ui-tab-content" style="width: 200%;">
            <li>
                <section class="ui-constom-block" style="margin: 0;padding: 0;">
                    <div class="detail-image con-item" data-index="0">
                        <div class="pics">
                            <dl class="pic-box">
                                <dd class="pic-list">
                                     ${goods.goods_desc!}
                                    <img class="fadeIn" src="http://s20.mogucdn.com/b7/pic/150306/127hov_iezdantbmuygmnldmyytambqmmyde_3464x2560.jpg_641x999.jpg" />
                                    <img class="fadeIn" src="http://s17.mogucdn.com/b7/pic/150306/127hov_ieztmzdgmyygmnldmyytambqgyyde_1600x1176.jpg_641x999.jpg" />
                                    <img class="fadeIn" src="http://s18.mogucdn.com/b7/pic/150306/127hov_ie2don3bgmywmnldmyytambqgiyde_1600x1159.jpg_641x999.jpg" />
                                    <img class="fadeIn" src="http://s17.mogucdn.com/b7/pic/150306/127hov_ieytgzjyhaywmnldmyytambqmeyde_1000x1500.jpg_641x999.jpg" />
                                    <img class="fadeIn" src="http://s18.mogucdn.com/b7/pic/150306/127hov_ie2tkzbumiywmnldmyytambqhayde_1000x1500.jpg_641x999.jpg" />
                                    <img class="fadeIn" src="http://s18.mogucdn.com/b7/pic/150306/127hov_ie2dsodemqywmnldmyytambqgiyde_1000x1500.jpg_641x999.jpg" />
                                </dd>
                            </dl>
                        </div>
                    </div>
                </section>
            </li>
            <li>
                <ul class="ui-list ui-list-text ui-border-b">
                    <li class="ui-border-t">
                        <div class="u-list-tit" style="padding-right: 10px;">
                                                        参数名称:
                        </div>
                        <div class="ui-list-info">
                            <p class="ui-nowrap">这是内容，加ui-nowrap可以超出长度截断</p>
                        </div>
                    </li>
                </ul>
            </li>
        </ul>
    </div>
</section>

<section class="t ui-pf">
    <a href="${ctx}/mobile/cart/index" class="ui-btn">购物车</a>
    <!-- <a href="#" class="ui-btn">立即购买</a>  -->
    <a href="#" id="addCart" class="ui-btn">加入购物车</a>
    <div class="ui-mask">
        <form action="">
            <ul class="ui-list">
                <li>
                    <div class="ui-list-thumb ui-avatar-s">
                        <span style="background-image:url(http://placehold.sinaapp.com/?100*100)"></span>
                    </div>
                    <div class="ui-list-info">
                        <h4 class="ui-nowrap">${goods.goods_name!}</h4>
                        <p class="ui-nowrap price">${goods.base_price!}元</p>
                        <input type="hidden" id="goods" value="${goods.id!}">
                    </div>
                </li>
            </ul>
            <ul class="ui-list" id="attrs">
                <%for(goodAttr in goodAttrs){%>
                 <li class="ui-border-t" >
                    <div  class="u-list-tit">
                        <p id="${goodAttr.attr_id!}">${goodAttr.attr_name!}</p>
                    </div>
                    <div class="ui-list-info choose">
                        <%
                        var className="";
                        for(goodAttrValue in goodAttrValues){
	                          if(goodAttrValue.attr_id==goodAttr.attr_id){
	                              if(goodAttrValueLP.index == 1){
	                                className="ui-btn-s ui-btn-primary";
	                              }else{
	                                className="ui-btn-s";
	                              }
	                          %>
		                      <a class="${className!}" name="attrvalues" href="#" >${goodAttrValue.attr_value!}</a>
	                          <%}
                         }%>
                    </div>
                 </li>
               <%}%>
               </ul>
            <ul class="ui-list">
                <li class="ui-border-t">
                    <div class="u-list-tit">
                        <p>数量</p>
                    </div>
                    <div class="ui-list-info">
                        <a id="reduce" class="ui-btn-s" href="#">-</a>
                        <input type="text" id="num" class="num" value="1"/>
                        <a id="add" class="ui-btn-s" href="#">+</a>
                    </div>
                </li>
                <li class="ui-border-t">
                    <div class="u-list-tit"></div>
                    <div class="ui-list-info">
                        <a id="definite" class="ui-btn ui-btn-primary" href="#" style="width: 150px;">确定</a>
                        <input type="hidden" id="goods_sku_id"/>
                    </div>
                </li>
            </ul>
        </form>
        <a href="#" id="closeMask" class="ui-btn-s ui-pa" style="right: 15px;top: 15px;">关闭</a>
    </div>
</section>

<script src="${ctx}/mobielresouce/js/lib/sea.js"></script>
<script>
    seajs.config({
            alias:{
                'zepto'     : '${ctx}/mobielresouce/js/lib/zepto.js',
                'frozen'    : '${ctx}/mobielresouce/js/lib/frozen.js',
                'handlebars': '${ctx}/mobielresouce/js/handlebars-v3.0.1.js'
            }
    });
    seajs.use(['zepto', 'frozen'],function(){
        // slider
        var slider = new fz.Scroll('.ui-slider', {
            role: 'slider',
            indicator: true,
            autoplay: false,
            interval: 5000
        });

        var tab = new fz.Scroll('.ui-tab', {
            role: 'tab',
            interval: 3000
        });

        $('#addCart').on('tap', function(){
            var h = $('.ui-mask').height();
            $('.ui-mask').animate({top: -h+'px'});

            return false;
        });

        $('#reduce, #add').on('tap', function () {
            var id = $(this).attr('id');
            setStock(id);
            return false;
        });
        
        $('.choose > a').on('tap', function () {
            $(this).siblings('a').removeClass('ui-btn-primary')
            $(this).addClass('ui-btn-primary');
            $(this).siblings('input').val($(this).text());
            setStock("changePrice");
        });

      $('#definite').on('tap', function () {
        	var num = parseInt($('#num').val());
            var goodsId =$('#goods_sku_id').val();
            if(goodsId!=""){
		   		$.post("${ctx}/mobile/cart/addCartItem", { goodsId: goodsId, num:num },
				  function(data){
				   eval('var data = ' + data + ';');
					if(data.success) {
						alert("添加成功");
					}
				 },"text");
			 }else{
			 	alert("请选择要购买商品!");
			 }
            return false;
        });

        $('#closeMask').on('tap', function () {
            $(this).parents('.ui-mask').animate({top: '100%'});
        });

        function setStock(id){
            var val = parseInt($('#num').val());
            var goodsId =$('#goods').val();
            var attrValueStr ="";
		    $("#attrs").find(".ui-btn-primary").each(function () {
	             attrValueStr+= "#"+$(this).text();
	        });
	        var postData={
	        	    goodsId:goodsId,
	    	        attrStr:attrValueStr
		    };
		    if(id=='add' || id=='changePrice') {
                $.ajax({
                    url: '${ctx}/mobile/goods/getStockPrice',
                    type: 'post',
                    dataType: 'json',
                    data: postData,
                    success: function (result) {
                    	if(id=='add'){
	                    	val++;
	                        if(parseInt(result.stocks)>=val) {
	                            $('#num').val(val);
	                        } else if(result.stocks <val) {
	                            var el2=$.tips({
	                                content:'库存不足',
	                                stayTime:2000,
	                                type:"info"
	                            });
	                        }
                    	}else{
                        	//更换价格
                    		$(".price").text(result.price.toFixed(2));
                    		$(".ui-nowrap.price").text(result.price.toFixed(2)+"元"); 
                    		$("#goods_sku_id").val(result.id); 
                        }
                    }
                })
            } else {
                if(val>1){
                    $('#num').val(--val);
                } else {
                    var el2=$.tips({
                        content:'最小单位为1',
                        stayTime:2000,
                        type:"info"
                    });
                }
            }
        }

    });

    
</script>
</body>
</html>